<template>
  <el-col class="pt-3 pl-3 app-flex app-column">
    <div class="py-3">总营业报表</div>
    <el-row class="app-fill-width">
      <el-col class="mr-5" :span="5">
        <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="至"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-ddTHH:ss:mm.000Z"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="getBarData">查看</el-button>
      </el-col>
    </el-row>
    <div v-if="noData" class="app-hv-center app-flex-1">暂无数据~</div>
    <div v-else class="mt-4 ml-4 app-flex-1">
      <div id="chart" class="app-fill" />
    </div>
  </el-col>
</template>

<script>
import * as echarts from 'echarts'
import { getNewBarData } from '@/api/customer'
export default {
  data: function() {
    const nowDate = new Date(new Date() + 8 * 3600 * 1000)
    return {
      dates: [new Date(nowDate.getFullYear(), parseInt(nowDate.getMonth()), 1), nowDate],
      myChart: null,
      isLoading: false,
      noData: false
    }
  },
  mounted() {
    this.getBarData()
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.myChart.resize)
  },
  methods: {
    getBarData() {
      this.isLoading = true
      getNewBarData({
        beginTime: this.dates[0],
        endTime: this.dates[1]
      }).then((res) => {
        this.isLoading = false
        if (res.code === 200) {
          this.$message.success('数据已加载！')
          if (!res.data.employeeReceiptsServiceVos) {
            this.noData = true
          } else {
            this.noData = false
            this.initChart(res.data)
          }
        }
      })
    },
    initChart(data) {
      this.myChart = echarts.init(document.getElementById('chart'))
      this.myChart.setOption(this.getOption(data))
      window.addEventListener('resize', this.myChart.resize)
    },
    getOption(data) {
      return {
        title: {
          text: `当前查询数据总额${data.allReceipts}元`
        },
        tooltip: {
          // trigger: 'axis',
          axisPointer: {
            // type: 'shadow',
            label: {
              show: true
            }
          }
        },
        calculable: true,
        // legend: {
        //   data: ['收入'],
        //   itemGap: 5
        // },
        grid: {
          top: '90',
          left: '1%',
          right: '5%',
          bottom: 50,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.employeeReceiptsServiceVos?.map(v => v.itemName) || []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '收入/元'
            // axisLabel: {
            //   formatter: function(a) {
            //     a = +a
            //     return isFinite(a) ? echarts.format.addCommas(+a / 1000) : ''
            //   }
            // }
          }
        ],
        dataZoom: [
          {
            bottom: 10,// 下滑块距离x轴底部的距离
            height: 20,// 下滑块手柄的高度调节
            type: 'slider',// 类型,滑动块插件
            show: true,// 是否显示下滑块
            xAxisIndex: [0],// 选择的x轴
            startValue: 0, // 滑块左端对应的x值
            endValue: 30, // 滑块右端对应的x值
            // start: 0, // 初始数据显示多少
            // end: 50, // 初始数据最多显示多少
            brushSelect: false
          }
        ],
        series: [
          {
            itemStyle: {
              normal: {
                label: { show: true,position: 'top' },
                color: '#2e4555'
              }
            },
            name: '收入',
            type: 'bar',
            barMaxWidth: 10,
            data: data.employeeReceiptsServiceVos?.map(v => v.receipts) || []
          }
          // {
          //   itemStyle: {
          //     normal: {
          //       label: { show: true,position: 'top' },
          //       color: '#c13633'
          //     }
          //   },
          //   name: '总收入',
          //   type: 'bar',
          //   barMaxWidth: 10,
          //   data: data.employeeReceiptsServiceVos?.map(v => v.receipts) || []
          // }
        ]
      }
    }
  }
}
</script>

<style></style>
